import React from 'react';
import {Flow, Button} from 'acud';
import styled from 'styled-components';

const Wrapper = styled.div`
    border: 1px dashed #aaa;

    :hover,
    :active,
    :focus-visible {
        border: 1px dashed #2468f2;
    }
`;

const templateContent = {
    templateName: 'tinyTemplate',
    node: {
        box: {
            name: 'Rect',
            normal: {
                style: {
                    stroke: '#108CEE',
                    fill: '#fff',
                    lineWidth: 1,
                },
                shape: {
                    x: 0,
                    y: 0,
                    r: 0,
                    width: 180,
                    height: 30,
                },
            },
        },
        text: {
            name: 'Text',
            position: [31, 8],
            normal: {
                style: {
                    text: '<@nodeName>',
                    fontFamily: 'PingFangSC-Regular',
                    fontSize: 12,
                    textFill: '#333',
                },
            },
        },
        inputCircle: {
            name: 'Circle',
            normal: {
                style: {
                    stroke: '#79818F',
                    fill: '#fff',
                    lineWidth: 1,
                },
                shape: {
                    r: 4,
                },
            },
            // 自定义位置时，使用
            circlePosition: 'top',
            // 自动排序，水平排序时位置
            horizontalCirclePosition: 'left',
            // 自动排序，垂直排序位置
            verticalCirclePosition: 'top',
        },
        outputCircle: {
            name: 'Circle',
            normal: {
                style: {
                    stroke: '#79818F',
                    fill: '#fff',
                    lineWidth: 1,
                },
                shape: {
                    r: 4,
                },
            },
            circlePosition: 'bottom',
            // 自动排序，水平排序时位置
            horizontalCirclePosition: 'right',
            // 自动排序，垂直排序位置
            verticalCirclePosition: 'bottom',
        },
        icon: {
            name: 'Image',
            normal: {
                style: {
                    image: '<@imgSrc>',
                    x: 10,
                    y: 7,
                    width: 16,
                    height: 16,
                },
                origin: [18, 15],
            },
        },
    },
    edge: {
        line: {
            name: 'BezierCurve',
            normal: {
                style: {
                    stroke: '#999999',
                    lineWidth: 1,
                },
                z: 2,
            },
        },
        backline: {
            name: 'BezierCurve',
            normal: {
                style: {
                    stroke: '#ccc',
                    lineWidth: 1,
                },
                z: 1,
            },
        },
        triangle: {
            name: 'Triangle',
            normal: {
                shape: {
                    width: 10,
                    height: 6,
                },
                style: {
                    fill: '#999999',
                },
            },
        },
    },
};

// 渲染参数
let node1 = {
    // id
    id: '123',
    defineData: {
        nodeName: 'data1',
    },
    // 画布中位置
    position: [100, 100],
    // 输入
    input: [{}],
    // 输出
    output: [
        {
            enbaleInputs: [
                {
                    id: '124',
                    inputIndex: 0,
                },
            ],
        },
    ],
};
let node2 = {
    id: '124',
    defineData: {
        nodeName: 'data2',
    },
    // 画布中位置
    position: [150, 200],
    // 输入
    input: [{}],
    // 输出
    output: [{}],
};
let node3 = {
    // id
    id: '1245',
    defineData: {
        nodeName: 'data3',
    },
    // 画布中位置
    position: [100, 300],
    // 输入
    input: [{}],
    // 输出
    output: [{}],
};
let nodes = [node1, node2, node3];
let edges = [
    {
        src: '123:0',
        to: '124:0',
    },
    {
        src: '124:0',
        to: '1245:0',
    },
];
const data: any = {nodes, edges};
// 实例化
// 模版配置，主要用于样式
let globalConfig = {
    templateName: 'tinyTemplate',
    cWidth: 800,
    cHeight: 400,
    // 是否静态图片
    isStatic: false,
    zoom: {
        default: true,
    },
    pan: {
        default: true,
    },
};

const FlowItem = () => {
    const insRef = React.useRef<any>(null);

    const addNode = React.useCallback(() => {
        insRef.current.ins.addNode({
            id: '4',
            defineData: {
                nodeName: 'data4',
            },
            // 画布中位置
            position: [100, 350],
            // 输入
            input: [{}],
            // 输出
            output: [{}],
        });
    }, []);

    const removeNode = React.useCallback(() => {
        insRef.current.ins.removeNode({id: '4'});
    }, []);

    return (
        <>
            <Flow
                ref={insRef}
                data={data}
                config={globalConfig}
                width={800}
                height={400}
                templates={[
                    {
                        name: 'tinyTemplate',
                        content: templateContent,
                    },
                ]}
            />
            <Button style={{marginRight: 20}} onClick={addNode}>
                add node
            </Button>
            <Button onClick={removeNode}>remove node</Button>
            <Wrapper contentEditable>111</Wrapper>
        </>
    );
};

export default FlowItem;
